<template>
  <div id="order-history">
    <ContentField>
      <template v-slot:content-field-card-name>我的订单</template>
      <template v-slot:content-field-card-button></template>
      <template v-slot:content-field-card-body>
        <div id="order-history-body" style="position: relative">
          <el-table
            :data="order_list"
            border
            height="500"
            style="width: 100%; position: absolute"
            @row-click="orderHistoryTableRowClick"
          >
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="statusStr" label="是否付款" />
            <el-table-column prop="finishTime" label="完成时间" />
            <el-table-column prop="tableId" label="桌号" />
            <el-table-column prop="clientNum" label="人数" />
            <el-table-column prop="isPredetermineStr" label="是否预定" />
            <el-table-column prop="totalMoney" label="消费金额" />
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
    <!-- 订单详情dialog -->
    <el-dialog v-model="orderInfoDialogVisible" title="订单详情">
      <el-table :data="order_item_list" border height="200">
        <el-table-column prop="remark" label="菜品" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              round
              @click="writeReviewBtnClick(scope.row, 0)"
              >评论</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" round @click="writeReviewBtnClick('', 1)"
            >评论服务</el-button
          >
          <el-button @click="orderInfoDialogVisible = false"> 关闭 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 写菜品评论dialog -->
    <el-dialog v-model="writeReviewDialogVisible" title="欢迎评论">
      <el-form :model="curOrderItem" class="demo-form-inline">
        <el-form-item label="评分">
          <el-input v-model="curOrderItem.star" />
        </el-form-item>
        <el-form-item label="评论">
          <el-input v-model="curOrderItem.content" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="writeReviewDialogVisible = false">
            关闭
          </el-button>
          <el-button type="primary" round @click="subReviewBtnClick"
            >提交</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { computed, ref, reactive } from "vue";
import { onUnmounted } from "vue";
import { Check } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
// import dateUtil from "@/util/date";
export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();
    store.dispatch("get_order_by_client_id", {
      token: store.state.user.jwt_token,
      client_id: store.state.client.id,
    });
    let order_list = computed(() => {
      let res = store.state.order.order_list;
      res.forEach((element) => {
        element.isPredetermineStr =
          element.isPredetermineStr == "1" ? "是" : "否";
        element.statusStr = element.status == "1" ? "已付款" : "未付款";
        element.create_time = Date.parse(element.createTime);
      });
      res.sort((a, b) => {
        return b.create_time - a.create_time;
      });
      return res;
    });
    onUnmounted(() => {
      store.dispatch("disconnect_websocket");
    });

    let orderInfoDialogVisible = ref(false);
    let writeReviewDialogVisible = ref(false);
    let curOrder = reactive({});
    let curOrderItem = reactive({});

    let bindCurOrder = (order) => {
      curOrder.sum = order.sum;
      curOrder.id = order.id;
      curOrder.clientId = order.clientId;
      curOrder.clientNum = order.clientNum;
      curOrder.tableId = order.tableId;
      curOrder.status = order.status;
      curOrder.serverId = order.serverId;
      curOrder.createTime = order.createTime;
      curOrder.finishTime = order.finishTime;
      curOrder.totalMoney = order.totalMoney;
      curOrder.isPredetermine = order.isPredetermine;
      curOrder.predetermineTime = order.predetermineTime;
    };

    let bindCurOrderItem = (orderItem) => {
      curOrderItem.id = orderItem.id;
      curOrderItem.chefId = orderItem.chefId;
      curOrderItem.createTime = orderItem.createTime;
      curOrderItem.finishTime = orderItem.finishTime;
      curOrderItem.foodId = orderItem.foodId;
      curOrderItem.orderId = orderItem.orderId;
      curOrderItem.remark = orderItem.remark;
    };

    let order_item_list = computed(() => {
      return store.state.order_item.order_item_list;
    });

    let orderHistoryTableRowClick = (row) => {
      bindCurOrder(row);
      orderInfoDialogVisible.value = true;
      store.dispatch("get_order_item_by_order_id", {
        token: store.state.user.jwt_token,
        order_id: row.id,
      });
    };

    let writeReviewBtnClick = (orderItem, flag) => {
      bindCurOrderItem(orderItem);
      curOrderItem.food_or_server = flag;
      writeReviewDialogVisible.value = true;
    };

    // todo
    let subReviewBtnClick = () => {
      if (curOrderItem.food_or_server == 0) {
        store.dispatch("add_review_to_food", {
          token: store.state.user.jwt_token,
          food_id: curOrderItem.foodId,
          order_item_id: curOrderItem.id,
          star: curOrderItem.star,
          content: curOrderItem.content,
          success(data) {
            if (data.code == 200) {
              ElNotification.success({
                title: "Success",
                message: "评论成功",
                offset: 100,
              });
              writeReviewDialogVisible.value = false;
            } else {
              ElNotification.success({
                title: "Success",
                message: "评论失败",
                offset: 100,
              });
            }
          },
        });
      } else if (curOrderItem.food_or_server == 1) {
        store.dispatch("add_review_to_server", {
          token: store.state.user.jwt_token,
          server_id: curOrder.serverId,
          order_id: curOrder.id,
          star: curOrderItem.star,
          content: curOrderItem.content,
          success(data) {
            if (data.code == 200) {
              ElNotification.success({
                title: "Success",
                message: "评论成功",
                offset: 100,
              });
              writeReviewDialogVisible.value = false;
            } else {
              ElNotification.success({
                title: "Success",
                message: "评论失败",
                offset: 100,
              });
            }
          },
        });
      }
    };

    return {
      order_list,
      orderHistoryTableRowClick,
      writeReviewDialogVisible,
      orderInfoDialogVisible,
      order_item_list,
      Check,
      writeReviewBtnClick,
      curOrderItem,
      subReviewBtnClick,
    };
  },
};
</script>

<style scoped></style>
